<script setup lang="ts">
import { useUserStore } from '@/stores/user'
// 引入所有需要的图标
import {
  House,
  Document,
  Setting,
  Monitor,
  Delete,
  Back,
  User,
  Key,
  Lock,
  DataAnalysis,
  HelpFilled,
  Memo,
} from '@element-plus/icons-vue'

const userStore = useUserStore()
</script>

<template>
  <div class="nav-container">
    <div class="nav-header">
      <img src="/assets/myLogo.jpg" alt="Logo" class="nav-logo" />
      <h1 class="nav-title">管理后台</h1>
    </div>
    <el-menu :default-active="$route.path" class="admin-menu" router>
      <el-menu-item index="/admin">
        <el-icon><House /></el-icon>
        <span>后台首页</span>
      </el-menu-item>
      <el-menu-item index="/admin/article-manage">
        <el-icon><Document /></el-icon>
        <span>文章管理</span>
      </el-menu-item>
      <template v-if="userStore.role === 'ADMIN'">
        <el-sub-menu index="system-manage">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/admin/user-manage"
            ><el-icon><User /></el-icon>用户管理</el-menu-item
          >
          <el-menu-item index="/admin/role-manage"
            ><el-icon><Key /></el-icon>角色管理</el-menu-item
          >
          <el-menu-item index="/admin/permission-manage"
            ><el-icon><Lock /></el-icon>权限管理</el-menu-item
          >
        </el-sub-menu>
        <el-sub-menu index="system-monitor">
          <template #title>
            <el-icon><Monitor /></el-icon>
            <span>系统监控</span>
          </template>
          <el-menu-item index="/admin/logs"
            ><el-icon><Memo /></el-icon>系统日志</el-menu-item
          >
          <el-menu-item index="/admin/cache"
            ><el-icon><HelpFilled /></el-icon>系统缓存</el-menu-item
          >
          <el-menu-item index="/admin/sql"
            ><el-icon><DataAnalysis /></el-icon>SQL监控</el-menu-item
          >
        </el-sub-menu>
      </template>
      <el-menu-item index="/admin/restroom">
        <el-icon><Delete /></el-icon>
        <span>文章回收站</span>
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="/">
        <el-icon><Back /></el-icon>
        <span>返回博客前台</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.nav-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-header {
  display: flex;
  align-items: center;
  padding: 20px;
  flex-shrink: 0;
}

.nav-logo {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 6px;
}

.nav-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.admin-menu {
  border-right: none !important; /* 移除element-plus自带的边框 */
  flex-grow: 1;
}

.el-menu-item {
  margin: 0 8px 4px;
  border-radius: 6px;
  height: 44px;
}

.el-menu-item:hover {
  background-color: #f4f7fa;
}

.el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
  font-weight: 500;
}

.flex-grow {
  flex-grow: 1;
}
</style>
